import React from 'react'
import MulModal from "components/mul-modal"
import { Button, message } from "antd";

export default {
  key: 'mul-modal',
  name: 'MulModal 多级弹框',
  author: '吴程龙',
  description: '用于多级弹框的交互',
  isExampleFull: true,
  api: [{
    title: 'API',
    data: [{
      param: 'content', description: '每级modal的内容', type: 'Array', defaultValue: '-'
    }, {
      param: 'onOkArray', description: '对应每级内容的确定按钮点击回调', type: 'Array', defaultValue: '-'
    }, {
      param: 'confirmLoadingArray', description: '对应每级内容的确定按钮的Loading', type: 'Array', defaultValue: '-'
    }, {
      param: 'okTextArray', description: '对应每级内容的确定按钮的文案', type: 'Array', defaultValue: '-'
    }, {
      param: 'destroyOnClose', description: '在关闭后弹窗后容器状态更新', type: 'bool', defaultValue: 'true'
    }],
    description: '是一个弹框加上一个随着index改变的content组成，为了容器状态每次都是最新，加入::destroyOnClose::参数,他的作用是每次弹窗打开会触发内容的didMount周期而不是willReceive，更符合react要求'
  }],
  example: [
    {
      title: '基础用法',
      description: '用原Modal的props直接改组件名为MulModal',
      state: {
        visible: false,
      },
      getMethod: context => {
        return {
          setVisible: () => {
            context.setState({ visible: !context.state.visible });
          }
        }
      },
      getContent: context => {
        const { visible } = context.state;
        return (
          <div>
            <Button onClick={context.setVisible} type={'primary'}>弹框</Button>
            <MulModal
              title={'弹框'}
              visible={visible}
              onOk={() => message.info('Ok')}
              onCancel={context.setVisible}
            >
              <div>弹框</div>
            </MulModal>
          </div>
        )
      }
    },
    {
      title: '多级弹框',
      description: 'Content调MulModal ref的changeIndex方法改弹框现实的层级',
      state: {
        visible: false,
      },
      getMethod: context => {
        return {
          setVisible: () => {
            context.setState({ visible: !context.state.visible });
          }
        }
      },
      getContent: context => {
        const { visible } = context.state;
        return (
          <div>
            <Button onClick={context.setVisible} type={'primary'}>弹框</Button>
            <MulModal
              title={'弹框'}
              visible={visible}
              onOkArray={[
                () => message.info('第一级Ok'),
                () => message.info('第二级Ok'),
                () => message.info('第三级Ok')
              ]}
              destroyOnClose
              onCancel={context.setVisible}
              onRef={modalRef => context.modalRef = modalRef}
              content={[
                <div>
                  第一级弹框
                  <Button onClick={() => context.modalRef.changeIndex(1)}>
                    进入第二级
                  </Button>
                </div>,
                <div>
                  第二级弹框
                  <Button onClick={() => context.modalRef.changeIndex(2)}>
                    进入第三级
                  </Button>
                </div>,
                <div>第三级弹框</div>
              ]}
              okTextArray={[
                '第一级确定',
                '第二级确定',
                '第三级确定'
              ]}
            />
          </div>
        )
      }
    }
  ]
}
